<template>
	<view class="outBox">
		<u-toast></u-toast>
		
		<view class="box" :class="{'box-ani': isDim}">
			<!-- 商家标题 -->
			<shop-title :food="food" :isLove="isLove" style="width: 100%;"></shop-title>
			
			<view class="shop-item-box">
				<shop-item
					v-for="item in shop"
					:key="item.id" 
					:shop="item">
				</shop-item>
			</view>
		</view>
	
		<!-- 购物车 -->
		<shop-car 
			:isDim="isDim"
			@doShowDim="showDim">
		</shop-car>
		
		<!-- 模糊层 -->
		<shop-dim
			v-show="isDim"
			@doCloseDim="showDim(false)">
		</shop-dim>
	</view>
</template>

<script>
	import shopTitle from './components/shop-title/shop-title.vue'
 	import shopItem from './components/shop-itm/shop-item.vue'
	import shopCar from './components/shop-car/shop-car.vue'
	import shopDim from './components/shop-dim/shop-dim.vue'
	import { mapState, mapGetters ,mapMutations } from 'vuex'
	
	export default {
		components: { shopTitle, shopItem, shopCar ,shopDim },
		data() {
			return {
				food: {},
				shop: [],
				
				// 是否收藏
				isLove: false,
				
				// 模糊层
				isDim: false
			}
		},
		computed: {
			...mapState('car', ['shopCar']),
			...mapGetters('car', ['checkSize']),
			...mapState('user', ['userId'])
		},
		watch: {
			// 监听选泽多少,当没有的时候模糊层关闭
			checkSize(newVal) {
				if (newVal === 0) {
					this.isDim = false
				}
			}
		},
		methods: {
			...mapMutations('car', ['addShopCar', 'clearCar']),
			showDim(flag) {
				this.isDim = flag
			}
		},
		onLoad(o) {
			this.food = JSON.parse(o.obj)
			this.$myRequest({
				url: '/shop/' + this.food.id + '/' + this.userId,
			}).then(res => {
				this.isLove = res.data.result.isLove
				this.shop = res.data.result.list
			})
		},
		onUnload() {
			this.clearCar()
		}
	}
</script>

<style>
	.box{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.shop-item-box{
		width: 95%;
		margin-top: 30rpx;
		margin-bottom: 150rpx;
		background-color: #FFFFFF;
		border-radius: 12px;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
					rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
	}
</style>
